<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.fu{
				height: 600px; 
				width: 870px;
				background-color: powderblue;
				border: 2px solid #000000;
				/*display: flex;
				justify-content: center;*/
				margin: 0 auto;
				display: flex;
				
				}
				.da1{
					
					height: 600px;
					width: 240px;
					background:url(img/4.png);
					
					
				}
				.da11{
					height: 50px;
					width: 240px;
					/*background-color: aliceblue;*/
					color: white;
					font-size: x-large;
					font-weight: bolder;
					margin: 480px 0px;
					display: flex;
					align-items: center;
					justify-content:center;
					/*flex-direction: inherit;*/
				}
				.da2{
					margin-left: 10px;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
				}
				.zhong1{
					
					background-color: aliceblue;
					display: flex;
					justify-content: space-around;
					
				}
				.zhong2{
					background-color: white;
					margin-top: 10px;
					display: flex;
					justify-content: space-between;
				
				}
				.xiao1{
					width: 300px;
					height: 295px;
				    background-color: white;
					display: flex;
					
				}
				.xiao3{
					width: 310px;
					height: 295px;
				    background: url(img/10.png);
					display: flex;
					justify-content: center;
					flex-direction: center;
					
				}
				.xiao11{
					height: 295px;
					width: 590px;
					background-color:cornflowerblue;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
				}
				.xiao2{
					height: 295px;
					width: 150px;
					background-color: cornflowerblue;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
				}
				.tu2{
					height:180px;
					width: 140px;
					background-attachment: fixed
				}
			
		</style>
	</head>
	<body >
		<div class="fu">
		<div class="da1">
			<div class="da11"><p>优质进口水果</p></div></div>
		<div class="da2">
			<div class="zhong1">
				<div class="xiao3"></div>
				
				<div class="xiao1" style="margin-left: 10px;">
					<div class="xiao11"><img class="tu2" src="img/3.jpg"/>
					<p >特惠抢购</p>
					<p style="color: red;font-weight: bold;">¥99</p></div>
					<div class="xiao11" style="margin-left: 10px;"><img class="tu2" src="img/9.jpg"/>
					<p>促销精品</p>
					<p style="color: red;font-weight: bold;">¥99</p></div>
				</div>
			</div>
			
			<div class="zhong2" >
				<div class="xiao2" >
					<img class="tu2" src="img/5.jpg"/>
					<p>手撕面包</p>
					<p style="color: red;font-weight: bold;">¥33.9</p>
				</div>
				<div class="xiao2"><img class="tu2" src="img/6.jpg"/>
					<p>家用实惠装</p>
					<p style="color: red;font-weight: bold;">¥59.9</p></div>
				<div class="xiao2" ><img class="tu2" src="img/7.jpg"/>
					<p>二合一</p>
					<p style="color: red;font-weight: bold;">¥69</p> </div>
				<div class="xiao2" ><img class="tu2" src="img/8.jpg"/>
					<p>夺命大乌苏</p>
					<p style="color: red; font-weight: bold; ">¥159</p></div>
			</div>
		</div>
		</div>
	</body>
</html>
